<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../index.css">
    <style>
        /* 圣杯布局 */
        .container{
            padding-left: 100px;
            padding-right: 200px;
            overflow: hidden;
        }
        .container .center{
            width: 100%;
            height: 150px;
            float: left;
            background: yellow;
        }
        .container .left{
            width: 100px;
            height: 150px;
            background: red;
            margin-left: -100%;
            position: relative;
            left: -100px;
            float: left;
        }
        .container .right{
            width: 200px;
            height: 150px;
            background: blue;
            margin-left: -200px;
            position: relative;
            right: -200px;
            float: left;
        }
        /* 双飞翼布局 */
        .container_cup{
            overflow: hidden;
        }
        .center_cup{
            width: 100%;
            float: left;
        }
        .container_cup .center{
           margin-left: 100px;
           margin-right: 200px;
            background: green;
            height: 150px;
        }
        .container_cup .left{
            width: 100px;
            height: 150px;
            background: red;
            margin-left: -100%;
            float: left;
        }
        .container_cup .right{
            width: 200px;
            height: 150px;
            background: blue;
            margin-left: -200px;
            float: left;
        }
        
    </style>
</head>
<body>
    <pre>
        1.标准盒模型
        盒子的宽 = width + 2*border + padding-left + padding-right;
        盒子的高 = height + 2*border + padding-top + padding-bottom;
        2.IE盒模型
        盒子的宽 = width;
        盒子的高 = height;
        3.块级元素
            不设置宽度时，其宽度默认为100%，常见有<xmp><div>、<h1> ~ <h6>、<p>、<ul>、<li>、<ol>、<dl>、<table>、<address><form></form></xmp>      
        4.行内元素
            行内元素不会独占一行，只会占据自身内容的宽高，给行内元素设置宽高不起作用，margin值只对左右起作用，padding值只对左右起作用上下padding值不占据文档流，具体盒模型如下：
        5.display: inline-block; 使元素兼具行内元素和块元素的特性，但是会出现元素之间的留白现象，是因为元素之间存在空格。
                去除间距的方法一般有设置父元素font-size: 0;或者去除空格等，更多方法<a target="_blank" href="https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/" >点击查看</a>   
        6.position: relative; 相对于元素的正常位置进行定位，设置left top的值会偏离正常位置并覆盖相邻元素
        7.position: absolute; 相对于最近的除static定位以外的元素进行定位，如果父元素没有设置则相对于浏览器定位
        8.position: fixed; 相对于浏览器窗口定位
        9.position: static; 默认值没有定位属性
        10.float 块级元素忽略float的元素，行内元素和文本会环绕设置float的元素，设置float属性会出现高度塌陷的问题，需要清除浮动<br clear="all"></br>等。
        
        11.常见的经典布局：
                两栏布局：左侧宽度固定右侧宽度自适应
                实现方式：
                    1.计算属性 
                        .left: {display: inline-block; width: 200px;} 
                        .right: {display: inline-block; width: calc( 100% - 200px);}
                    2.浮动
                        .left: {float: left; width: 200px;} 
                        .right: {margin-left: 200px;}
                        .container {
                            overflow: hidden;    /* 别忘了清除浮动 */
                        }
                        或者：
                        .left: {float: left; width: 200px;} 
                        .right: {float: left; width: calc( 100% - 200px);}
                        .container {
                            overflow: hidden;    /* 别忘了清除浮动 */
                        }
                    3.形成BFC：
                        .left {
                            width: 200px;
                            float: left;
                        }
                        .right {
                            overflow: auto;    /* 形成 BFC */
                        }
                        .container {
                            overflow: hidden;
                        }
                    4.使用absolute定位
                        .container {
                            position: relative;
                        }
                        .left {
                            postion: absolute;
                            width: 100px;
                        }
                        .right {
                            margin-left: 100px;
                        }
                    5.使用flex布局等    
                三栏布局：左右两侧宽度固定，中间自适应
                        1.圣杯布局: 核心思想是使用浮动布局，灵活使用 margin 的负值,设置父元素的 padding 留出空间，之后利用 relative 来归位
                        2.双飞翼布局: 相对于圣杯布局多加了一个 div，将中间自适应部分包裹起来，利用子 div 的 margin 来给左右元素留空间。
    </pre>
        <div>
            <img src="lib/box.png" style="width: 600px;height: 400px;" alt="" title="行内元素设置padding和margin效果图">
            
        </div>
        <br>
        <div class="container">
            <div class="center">圣杯布局</div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <br>
        <div class="container_cup">
            <div class="center_cup">
                    <div class="center">双飞翼布局</div>
            </div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
</body>
</html>